<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input[value]{
            color: pink;
        }

        input[type="text"] {
            color: pink;
        }

        div[class^=icon]{
            color: red;
        }
        section[class$=data] {
            color: red;
        }
    </style>
</head>

<body>
    <!-- 
        2.1 CSS3的现状

            新增的CSS3特性有兼容性问题，ie9+才支持, 移动端支持优于PC端
            不断改进中
            应用相对广泛
            现阶段主要学习∶新增选择器和盒子模型以及其他特性


            CSS3给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。
            1.属性选择器
            2.结构伪类选择器
            3.伪元素选择器

     -->

    <!-- 
        2.2 属性选择器

            属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。

            选择符                简介
            E[att]               选择具有att属性的E元素
            E[att="val"]         选择具有att属性且属性值等于val的E元素
            E[att^="val"]        匹配具有att属性且值以val开头的E元素
            E[att$="val"]        匹配具有att属性且值以val结尾的E元素
            E[att*="val"]        匹配具有att属性且值中含有val的E元素

            类选择器，属性选择器，伪类选择器权重都是10
      -->


    <!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 -->
    <input type="text" value="请输入用户名">
    <input type="text">

    <br>

    <!-- 2. 属性选择器还可以选择属性=值的某些元素 重点务必掌握的 -->
    <input type="text" name="" id="">
    <input type="password" name="" id="">
    <!-- 3. 属性选择器可以选择属性值开头的某些元素 -->
    <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>
    <div>我是打酱油的</div>
    <!-- 4. 属性选择器可以选择属性值结尾的某些元素 -->
    <section class="icon1-data">我是安其拉</section>
    <section class="icon2-data">我是哥斯拉</section>
    <section class="icon3-ico">哪我是谁</section>


    <!-- 
        2.3 结构伪类选择器

            结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素

            选择符                简介
            E:first-child         匹配父元素中的第一个子元素E
            E:last-child          匹配父元素中最后一个E元素
            E:nth-child(n)        匹配父元素中的第n个子元素E
            E:first-of-type       指定类型E的第一个
            E:last-of-type        指定类型E的最后一个
            E:nth-of-type(n)      指定类型E的第n个


            nth-child (n)选择某个父元素的一个或多个特定的子元素

            n可以是数字，关键字和公式
            n如果是数字，就是选择第n个子元素，里面数字从1开始...
            n可以是关键字:even偶数，odd奇数
            n可以是公式︰常见的公式如下(如果n是公式，则从O开始计算，但是第0个元素或者超出了元素的个数会被忽略)

            公式        取值
            2n          偶数
            2n+1        奇数
            5n          5 10 15....
            n+5         从第5个开始（包含第五个)到最后
            -n+5        前5个(包含第5个)...


            区别:

            1. nth-child对父元素里面所有孩子排序选择(序号是固定的）先找到第n个孩子，然后看看是否和E匹配
            2. nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子

     -->


     <!-- 

        2.4 伪元素选择器（重点)

            伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。

            选择符        简介
            :before        在元素内部的前面插入内容
            :after        在元素内部的后面插入内容

            注意∶

            before和after创建一个元素，但是属于行内元素
            新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
            语法: element:before {}
            before和after必须有content属性
            before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
            伪元素选择器和标签选择器一样，权重为1

      -->

      <!-- 
        2.5 CSS3盒子模型
        
            CSS3中可以通过 box-sizing来指定盒模型，有2个值:即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
            
            可以分成两种情况︰

            1. box-sizing:content-box盒子大小为width + padding + border(以前默认的)
            2. box-sizing: border-box盒子大小为width

            如果盒子模型我们改为了box-sizing: border-box，那padding和border就不会撑大盒子了(前提padding和border不会超过width宽度)

       -->

       <!-- 
        cSS3滤镜filter:

            filter CSS属性将模糊或颜色偏移等图形效果应用于元素。
            
            filter:函数();  例如: filter: blur(5px);    blur模糊处理数值越大越模糊

            filter: url("../ ../ media/1examples/shadow.svg#element-id" );
            filter: blur( 5px);
            filter: contrast( 200%);
            filter: grayscale(80%);
            filter: hue-rotate(9odeg);
            filter: drop-shadow(16px 16px 20px red) invert( 75%);



            css3 calc函数:
            
            calc() 此CSS函数让你在声明CSS属性值时执行一些计算。
            width: calc(100% - 80px);
            括号里面可以使用+-*/来进行计算。


        -->

</body>

</html>